<template>
  <view class="container">
    <!-- 插入图片 -->
    <image src="/static/logo.png" mode="widthFix"></image>
    <view>今天天气真好</view>
    <view>state的值是 Vue</view>
    <view>State is vue</view>
    <view>uni-app</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    };
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
image {
  width: 100px; /* 设置图片宽度，根据需要调整 */
  height: auto; /* 高度自动适应，保持图片比例 */
  margin-bottom: 10px;
}
</style>

<template>
  <view class="container">
    <view>{{ detailMessage }}</view>
    <button @click="goBack">返回首页</button>
    <view v-if="showDetail">详情页内容</view>
    <view v-for="(item, index) in detailList" :key="index">
      {{ index + 1 }}. {{ item.title }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detailMessage: "This is detail page",
      showDetail: true,
      detailList: [
        { title: "How to do lists in Vue" },
        { title: "Another list item" }
      ]
    };
  },
  methods: {
    goBack() {
      uni.switchTab({
        url: "/pages/index/index"
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
button {
  margin: 10px 0;
}
</style>